<template>
  <div class="dropTree">
    <el-dropdown style="width:214px" @click.native="handleDrop">
      <el-button class="errType" style="width:90%;text-align:left;">
        <span v-for="(item, index) in formData.errLable" :key="index"
          >{{ item }},</span
        >{{ formData.errLable.length === 0 ? '请选择' : ''
        }}<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown"></el-dropdown-menu>
    </el-dropdown>
    <areaDialog
      :clickData="treeList"
      v-if="!treeList.lazyLoad"
      :show.sync="show"
    ></areaDialog>
  </div>
</template>

<script>
import areaDialog from '@/components/conditionComponents/areaDialog.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('charts')
export default {
  name: 'dropTree',
  props: {
    treeList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['formData'])
  },
  methods: {
    handleDrop() {
      this.show = true
    }
  },
  components: {
    areaDialog
  }
}
</script>
<style>
.el-button > span {
  display: flex;
  flex-wrap: wrap;
}
.errType > span > span {
  line-height: 20px;
}
</style>
<style scoped>
.errType {
  position: relative;
}
.errType > span {
  width: 94%;
  display: flex;
  flex-wrap: wrap;
}
.errType i {
  position: absolute;
  right: 10px;
}
</style>
